<template>
    <van-tabbar v-model="active" route>
        <van-tabbar-item name="home" icon="home-o" to="/admin/one">首页</van-tabbar-item>
        <van-tabbar-item name="label" icon="label-o" to="/admin/two">分类</van-tabbar-item>
        <van-tabbar-item name="cart" icon="cart-o" to="/gouwu">购物</van-tabbar-item>
        <van-tabbar-item name="friends" icon="friends-o" :to="path">{{logins}}</van-tabbar-item>
    </van-tabbar>

</template>

<script setup lang="ts">
import { ref, onBeforeMount, onUnmounted,onBeforeUpdate } from 'vue'
let path = ref('/login/denglu');

let logins = ref('未登录');

const active = ref('home')

onBeforeMount(() => {
    // 渲染前 查看是否存在账号 再修改底部导航栏的第四个选项数据
    if (localStorage.getItem('token')) {
        logins.value = '我的'
        path.value = '/my'
    } else {
        logins.value = '未登录'
        path.value = '/login/denglu'
    }
    
})
onBeforeUpdate(()=>{
    if (localStorage.getItem('token')) {
        logins.value = '我的'
        path.value = '/my'
    } else {
        logins.value = '未登录'
        path.value = '/login/denglu'
    }
})
</script>
<style scoped>
.v-dis {
    display: flex;
    justify-content: space-around;
}
</style>